<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/app.css}">
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" th:href="@{/css/article.css}">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Blog</title>
</head>
<body>
    <div class="headBar">
        <div class="headBar-items">
            <div class="headBar-item">
                <a th:href="@{/home}">主页</a>
            </div>
            <div class="headBar-item">
                <a th:href="@{/auth}" target="_blank">说明</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-user" style="position: absolute; left: 0;">
            <ul>
                <!--
                    自我介绍
                -->
                <li>
                    <div>
                        <img th:src="@{${user.avatarUrl}}">
                    </div>
                    <h1 th:text="${user.nickName}"></h1>
                    <div>
                        <p th:text="${user.introduction}" class="iconfont icon-github introduction"></p>
                    </div>
                </li>
                <!--
                    博客数据
                -->
                <li>
                    <div>
                        <span class="iconfont icon-browse"></span>
                        <span class="iconfont icon-comment"></span>
                        <span class="iconfont icon-good"></span>
                        <span class="iconfont icon-bad"></span>
                    </div>
                    <div>
                        <span th:text="${blog.browse}"></span>
                        <span id="message" th:text="${blog.message}"></span>
                        <span id="good" th:text="${blog.good}"></span>
                        <span id="bad" th:text="${blog.bad}"></span>
                    </div>
                </li>
                <!--
                    点赞
                -->
                <li>
                    <h1 style="font-size: 16px;color: #8B8989;">这篇文章有帮助到你吗</h1>
                    <div id="dz">
                        <span onclick="addGood()" class="iconfont icon-good" style="font-size: 30px;font-weight: bold;cursor: pointer;color: #597859"></span>
                        <span onclick="addBad()" class="iconfont icon-bad" style="font-size: 30px;font-weight: bold;cursor: pointer;color: #597859"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-show">
            <iframe th:src="@{${blog.html}}"
            name="article" id="iframe"  style="overflow-y:hidden;"
            width="100%" height="300px"
            frameborder="no" scrolling="auto">
            </iframe>
            <div  class="message">
                <h1 class="iconfont icon-edit">留言板</h1>
                <ul id="m">
                    <li th:each="message:${messages}">
                        <div th:if="${message.reply==true}" class="info" style="background-color: #597859">
                            <p th:text="${message.email}"></p>
                            <div th:text="${message.time}" class="time"></div>
                        </div>
                        <div th:if="${message.reply==false}" class="info" >
                            <p th:text="${message.email}"></p>
                            <div th:text="${message.time}" class="time"></div>
                        </div>
                        <div th:text="${message.content}" class="messageContent"></div>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <textarea id="content" maxlength="200" rows="2"></textarea>
                <div>
                    <span class="iconfont icon-email">Your QQ Email:</span>
                    <span><input id="email" type="email"></span>
                    <span><button onclick="addMessage()" type="button" class="iconfont icon-navigation" style="padding:10px 60px;"></button></span>
                </div>
            </div>
            <div class="share">
                <p th:text="'auth:'+${user.nickName}"></p>
                <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">
                    渝ICP备2022006298号-1</a>
                <a class="iconfont icon-fenxiang"></a>
                <a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=www.nskbz.com&sharesource=qzone&title=南山扛把子的个人博客&pics=https://s3.bmp.ovh/imgs/2022/05/17/6e6a8dfe6b5abcaf.jpeg&summary=朋友的个人学习博客，内容很棒，欢迎一起交流！" target="_blank" class="iconfont icon-kongjian"></a>
                <a href="https://service.weibo.com/share/share.php?&title=%E5%8D%97%E5%B1%B1%E6%89%9B%E6%8A%8A%E5%AD%90%E7%9A%84%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2&url=www.nskbz.cn&pic=https://s3.bmp.ovh/imgs/2022/05/17/6e6a8dfe6b5abcaf.jpeg" target="_blank" class="iconfont icon-weibo"></a>
                <a href="#" onclick="Toast('抱歉 微信暂时不支持')" target="_blank" class="iconfont icon-weixin"></a>
            </div>
        </div>
    </div>
</body>
<script th:inline="javascript" type = "text/javascript">
    window.onload = function () {
        let iframeBox = document.getElementById("iframe");
        let iframe = window.frames["article"];
        let h = iframe.document.body.offsetHeight;
        iframeBox.height = h+70;
    }
    let uid=[[${user.id}]];
    let bid=[[${blog.id}]];
    let context=[[${#servletContext.contextPath}]];
    let host=[[${host}]];
    let port=[[${port}]];
    let url="http://"+host+":"+port+context+"/user/"+uid+"/blog/"+bid;
    console.log(url);
    function addGood(){
        $.ajax({
            url:url+"/good",
            type:"get",
            dataType:"json",
            success:function(res){
                Toast(res.msg);
                let box=document.getElementById("good");
                box.innerText=parseInt(box.innerText)+1;
            },
            error:function(res){
                Toast(res);
            }
        });
    }
    function addBad(){
        $.ajax({
            url:url+"/bad",
            type:"get",
            success:function(res){
                Toast(res.msg);
                let box=document.getElementById("bad");
                box.innerText=parseInt(box.innerText)+1;
            },
            error:function(res){
                Toast(res);
            }
        });
    }
    function addMessage(){
        let json={
            email:document.getElementById("email").value,
            content:document.getElementById("content").value,
        };
        console.log(JSON.stringify(json));
        $.ajax({
            url:url+"/message",
            type:"post",
            dataType:"json",
            data:JSON.stringify(json),
            contentType: "application/json; charset=utf-8",
            success:function(res){
                document.getElementById("email").value="";
                document.getElementById("content").value="";
                Toast(res.msg);
                message(res);
                let box=document.getElementById("message");
                box.innerText=parseInt(box.innerText)+1;
            },
            error:function(res){
                Toast(res);
            }
        });
    }
    function message(res){
        let ul=document.getElementById("m");
        let li = document.createElement("li");
        let info=document.createElement("div");
        info.className="info";
        let time=document.createElement("div");
        time.className="time";
        time.innerText=res.data.time;
        let p=document.createElement("p");
        p.innerText=res.data.email;
        info.appendChild(p);
        info.appendChild(time);
        let content=document.createElement("div");
        content.className="messageContent";
        content.innerText=res.data.content;
        li.appendChild(info);
        li.appendChild(content);
        ul.appendChild(li);
    }

    function Toast(msg){
        let m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="font-size: .32rem;color: rgb(255, 255, 255);background-color: rgba(0, 0, 0, 0.6);padding: 10px 15px;margin: 0 0 0 -60px;border-radius: 4px;position: fixed;    top: 50%;left: 50%;width: 130px;text-align: center;";
        document.body.appendChild(m);
        setTimeout(function() {
            document.body.removeChild(m)
        }, 1500);
    }
</script>
</html>